<!doctype html>
<html>
<head>

    <title>jsPlumb - groups demonstration</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

    <link rel="stylesheet" href="../../css/jsplumbtoolkit-defaults.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/jsplumbtoolkit-demo.css">
    <link rel="stylesheet" href="demo.css">

</head>

    <body data-demo-id="groups">

        <a style="margin:10px 0 0 10px;display:inline-block" href="https://jsplumbtoolkit.com"><img src="../../img/logo-jsplumb-green.png"></a>

        <div class="jtk-demo-main">
            <!-- demo -->
            <div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">

                <div class="group-container" id="container1" group="one">
                    <div class="title"></div>
                    <ul>
                        <li>Elements constrained to group (<strong>constrain:true</strong>)</li>
                        <li>Elements are draggable to other groups </li>
                        <li>Deletes group and children</li>
                        <li>Not droppable (<strong>droppable:false</strong>)</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>
                    <div id="c1_1" class="w" style="left:30px;top:35px">1.1</div>
                    <div id="c1_2" class="w" style="left:160px;top:140px">1.2</div>
                </div>

                <div class="group-container" id="container2" group="two">
                    <div class="title"></div>
                    <ul>
                        <li>Elements are reverted on drop outside (<strong>revert:true</strong>)</li>
                        <li>Elements not draggable to other groups (<strong>dropOverride:true</strong>)</li>
                        <li>Deletes group only</li>
                    </ul>
                    <div class="del"></div>
                    <div class="node-collapse"></div>
                    <div id="c2_1" class="w" style="left:30px;top:40px">2.1</div>
                    <div id="c2_2" class="w" style="left:150px;top:160px">2.2</div>
                </div>

                <div class="group-container" id="container3" group="three">
                    <div class="title"></div>
                    <ul>
                        <li>Elements may be dragged outside bounds (<strong>revert:false</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group only</li>
                    </ul>
                    <div class="del"></div>
                    <div class="node-collapse"></div>
                    <div id="c3_1" class="w" style="left:30px;top:35px">3.1</div>
                    <div id="c3_2" class="w" style="left:80px;top:162px">3.2</div>
                </div>

                <div class="group-container" id="container4" group="four">
                    <div class="title"></div>
                    <ul>
                        <li>Elements pruned on drop outside (<strong>prune:true</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group and children</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>
                    <div id="c4_1" class="w" style="left:30px;top:35px">4.1</div>
                    <div id="c4_2" class="w" style="left:110px;top:150px">4.2</div>
                </div>

                <div class="group-container" id="container5" group="five">
                    <div class="title"></div>
                    <ul>
                        <li>Elements orphaned on drop outside (<strong>orphan:true</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group only</li>
                        <li>Not droppable (<strong>droppable:false</strong>)</li>
                    </ul>
                    <div class="del"></div>
                    <div class="node-collapse"></div>
                    <div id="c5_1" class="w" style="left:30px;top:35px">5.1</div>
                    <div id="c5_2" class="w" style="left:140px;top:130px">5.2</div>
                </div>

                <div class="group-container" id="container6" group="six">
                    <div class="title"></div>
                    <ul>
                        <li>No connections shown when group collapsed (<strong>proxied:false</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group and children</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>
                    <div id="c6_1" class="w" style="left:160px;top:45px">6.1</div>
                    <div id="c6_2" class="w" style="left:30px;top:150px">6.2</div>
                </div>

                <div class="group-container" id="container7" group="seven">
                    <div class="title"></div>
                    <ul>
                        <li>Elements are draggable to other groups, using ghost proxy (<strong>ghost:true</strong>)</li>
                        <li>Deletes group and children</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>
                    <div id="c7_1" class="w" style="left:30px;top:35px">7.1</div>
                    <div id="c7_2" class="w" style="left:90px;top:150px">7.2</div>
                </div>

                <div class="w" id="standalone" style="left:455px;top:280px" title="drag me into a group. if you want to.">?</div>

                <div class="events"><h3>Events</h3><div id="events"></div></div>
            </div>
            <!-- /demo -->
            <!-- explanation -->
            <div class="description">
                <h4>GROUPS</h4>
                <p>Demonstrates all of the ways you can use Groups.</p>
            </div>
            <!-- /explanation -->
        </div>


        <!-- JS -->
        <script src="../../dist/js/jsplumb.js"></script>

        <!-- groups -->
        <script src="../../src/group.js"></script>

        <script src="../demo-list.js"></script>

        <script src="demo.js"></script>


    </body>

</html>